<template>
  <div>
    <div class="plan-title q-mb-md">{{title}}</div>
    <div>
      <detail-dialog
          :headList="headList"
          :detailData="detailData"
          :colNumber="3"
          :statusList="['maintenanceStatus', 'recurRuleFreq']"
        >
          <template v-slot:maintenanceStatus>
            <div>
              <set-color :options="$getEnum(Enums.MAINTENANCE_STATUS)" :colorType="detailData.maintenanceStatus" />
            </div>
          </template>
        <template v-slot:recurRuleFreq>
          <div>
            {{ maintenanceStatusObj[detailData.recurRuleFreq] | toHorizontalLine }}
          </div>
        </template>
        </detail-dialog>
    </div>
    <div v-if="isOnlyBack">
      <div class="page-content">
          <q-table      :data="tableData"
                        :columns="columns"
                        row-key="id"
                        class="myTable scroll stick-to-top inherit"
                        :loading="isTableLoading"
                        :pagination.sync="pagination"
                        style="max-height: 400px; margin: 0"
                        no-data-label="暂无数据"
                        :hide-bottom="tableData.length > 0"
                        color="primary">
                <template v-slot:body-cell-index="props">
                  <q-td>
                    {{props.row.__index + 1}}
                  </q-td>
                </template>
                <template v-slot:body-cell-criteria="props">
                  <q-td>
                    {{props.row.criteria | toHorizontalLine}}
                  </q-td>
                </template>
                  <template v-slot:body-cell-status="props" >
                      <q-td v-if="props.row.status !== ''">
                        {{$getEnum(Enums.MAINTENANCE_ORDER_STATUS, props.row.status).desc | toHorizontalLine}}
                      </q-td>
                      <q-td v-else>
                          <div>
                            <q-radio
                              :val="1"
                              disable
                              label="正常"
                            />
                            <q-radio
                              :val="2"
                              disable
                              label="异常"
                            />
                          </div>
                      </q-td>
                  </template>
               <template v-slot:body-cell-remark="props">
                  <q-td>
                    {{ props.row.remark | toHorizontalLine }}
                  </q-td>
                </template>
                <template v-slot:no-data>
                    <div class="full-width row flex-center font-size-14" style="color: #999">
                      暂无数据
                    </div>
                </template>
            </q-table>
      </div>
      <div class="font-size-14 flex q-mt-md">
          <div class="padding-t-20 margin-r-20">上传图片:</div>
          <div class="flex-1 flex">
            <div class="img-item margin-r-20 margin-t-20 cursor-pointer"
                @click="lookImg(index)"
                v-for="(item, index) in faultPhotos" :key="index"
                :style="{'backgroundImage': `url('${item.url}')`}"></div>
          </div>
      </div>
      <div class="q-mt-md flex">
        <div class="q-mr-md">备注: </div>
        <div class="flex-1" style="word-break: break-all">{{queryParams.remark | toHorizontalLine}}</div>
      </div>
    </div>
    <div v-else>
          <div class="page-content">
              <q-table :data="tableData"
                            :columns="columnsOrder"
                            row-key="id"
                            class="myTable scroll stick-to-top inherit"
                            :loading="isTableLoading"
                            :pagination.sync="pagination"
                            style="max-height: 400px; margin: 0"
                            no-data-label="暂无数据"
                            :hide-bottom="tableData.length > 0"
                            color="primary">
                  <template v-slot:body-cell-index="props">
                      <q-td>
                        {{props.row.__index + 1}}
                      </q-td>
                    </template>
                  <template v-slot:body-cell-criteria="props">
                      <q-td>
                        {{props.row.criteria | toHorizontalLine}}
                      </q-td>
                    </template>
                    <template v-slot:body-cell-status="props">
                      <q-td>
                          <div>
                            <q-radio
                              v-model="props.row.status"
                              :val="1"
                              label="正常"
                            />
                            <q-radio
                              v-model="props.row.status"
                              :val="2"
                              label="异常"
                            />
                          </div>
                      </q-td>
                    </template>
                    <template v-slot:body-cell-remark="props">
                      <q-td style="padding: 14px 5px 2px 0">
                        <yz-input v-model="props.row.remark"
                                  style="width: 300px"
                                  :maxlength="20"></yz-input>
                      </q-td>
                    </template>
                    <template v-slot:no-data>
                        <div class="full-width row flex-center font-size-14" style="color: #999">
                          暂无数据
                        </div>
                    </template>
                </q-table>
          </div>
          <div class="margin-t-10" >
            <upload-picture v-model="imgList" :max="9" title="上传图片" ref="imgUpload" @uploadImg="uploadImg"/>
          </div>
          <div class="q-mb-md q-mt-md">
              <yz-input inputType="textarea" v-model="queryParams.remark" title="备注"  :maxlength="200"/>
          </div>
    </div>
    <look-img ref="lookImg" />
  </div>
</template>
<script>
import LookImg from 'src/components/look-img/index'
import _ from 'lodash'
const backList = [1, 3, 4]
export default {
  name: 'maintenance-information',
  props: {
    title: String,
    information: Object,
    supplementaryRecordStatus: {
      type: Boolean,
      default: false
    }
  },
  components: { LookImg },
  data () {
    return {
      headList: {
        maintenanceOrderNo: '保养单号',
        maintenanceTypeName: '保养类型', // [1-点检 2-保养]
        programName: '项目名称',
        operatorNameList: '保养人员',
        scheduledStartDate: '计划开始时间',
        maintenanceStatus: '保养状态',
        estimatedTimeName: '计划保养时长', // 单位estimatedTimeUnit 1 : 小时 2 天
        startDate: '保养开始时间',
        endDate: '保养结束时间',
        maintenanceTime: '保养时长',
        scheduleNo: '计划编号',
        recurRuleFreq: '保养周期',
        scheduleRemark: '备注'
      },
      detailData: {},
      faultPhotos: [],
      imgList: [],
      queryParams: {
        remark: ''
      },
      isTableLoading: false,
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'content', label: '项目内容', align: 'left', field: 'content' },
        { name: 'criteria', label: '判断基准', align: 'left', field: 'criteria' },
        { name: 'status', label: '操作', align: 'left', field: 'status' },
        { name: 'remark', label: '备注', align: 'left', field: 'remark' }
      ],
      columnsOrder: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'content', label: '项目内容', align: 'left', field: 'content' },
        { name: 'criteria', label: '判断基准', align: 'left', field: 'criteria' },
        { name: 'status', label: '操作', align: 'left', field: 'status' },
        { name: 'remark', label: '备注', align: 'left', field: 'remark' }
      ]
    }
  },
  computed: {
    isOnlyBack () {
      const data = this.detailData.maintenanceStatus
      return backList.includes(data) && !this.supplementaryRecordStatus
    },
    maintenanceStatusObj () {
      const statusObj = {}
      this.$getEnum(this.Enums.MAINTENANCE_CYCLE).forEach(item => {
        statusObj[item.value] = item.label
      })
      return statusObj
    }
  },
  methods: {
    // 清空数据
    refresh () {
      this.detailData = {}
      this.faultPhotos = {}
      this.imgList = []
      this.tableData = []
      this.queryParams.remark = ''
    },
    initData (params) {
      console.log(params)
      this.detailData = params
      // 上传图片
      if (this.isOnlyBack) {
        this.faultPhotos = _.cloneDeep(params.imgs)
      } else {
        this.imgList = params.imgs
      }
      // 项目内容
      // 增加保养中,初始化为正常
      this.tableData = params.items
      // 备注
      this.queryParams.remark = params.remark || ''
      // 保养信息
      this.detailData['maintenanceTime'] = _.isNil(params.maintenanceTime) ? '--' : this.$utils.secondToString(params.maintenanceTime)
      this.detailData['operatorNameList'] = params.operatorNameList.join() || '--'
      this.detailData['estimatedTimeName'] = params['estimatedTimeUnit'] ? `${params['estimatedTime']}${this.$getEnum(this.Enums.PLAN_TIME_UNIT, params['estimatedTimeUnit'])?.desc}` : ''
      this.detailData['maintenanceTypeName'] = _.isNil(params.maintenanceType) ? '--' : `${this.$getEnum(this.Enums.MAINTENANCE_TYPE, params['maintenanceType']).desc}`
      this.detailData['scheduledStartDate'] = this.$utils.setDateOSI(params['scheduledStartDate'], false, 'YYYY-MM-DD HH:mm:ss')
      this.detailData['startDate'] = params['startDate'] ? this.$utils.setDateOSI(params['startDate'], false, 'YYYY-MM-DD HH:mm:ss') : '--'
      this.detailData['endDate'] = params['endDate'] ? this.$utils.setDateOSI(params['endDate'], false, 'YYYY-MM-DD HH:mm:ss') : '--'
    },
    // 拼接数据
    setM_Data () {
      const params = {
        ...this.queryParams,
        maintenanceOrderItemLogList: this.tableData.map(v => {
          const item = {}
          item.itemLogId = v.id
          item.remark = v.remark
          item.status = v.status || ''
          return item
        }),
        maintenanceOrderAttachmentReqVOList: this.isOnlyBack ? this.faultPhotos : this.imgList
      }
      return params
    },
    // 查看文件详情
    lookImg (index) {
      const faultPhotos = _.map(this.faultPhotos, 'url')
      this.$refs.lookImg.showDialog(faultPhotos, index)
    },
    // 上传图片 在调用结束事件
    setM_Img () {
      if (!this.imgList.length) {
        this.uploadImg(this.imgList)
      } else {
        this.imgList.map(v => this.$refs.imgUpload.uploadFlie(v))
      }
    },
    uploadImg (val) {
      const params = this.setM_Data()
      params['maintenanceOrderAttachmentReqVOList'] = val
      this.$emit('onComplete_M', params)
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-item{
    width: 88px;
    height: 88px;
    background-color: #F6F6F6;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
  }
</style>
